<template>
  <div>
    <Frame
      class="frame"
      size="large-3"
      title="数智消控室"
      :visible="dialogVisible"
    >
      <template #default>
        <div class="box">
          <div class="header">
            <el-input
              placeholder="请输入消控室名称"
              v-model="searchForm.name"
              style="width: 260px; margin: 0 15px 0 0"
              size="small"
              maxlength="20"
              clearable
              @clear="clearName"
              class="el_input"
            >
              <el-button
                type="small"
                slot="append"
                :icon="loadingSearch ? 'el-icon-loading' : 'el-icon-search'"
                @click="searchClick"
              >
              </el-button>
            </el-input>

            <el-popover
              placement="bottom"
              width="460"
              trigger="click"
              popper-class="popover"
              size="small"
              v-model="showPopover"
            >
              <div>
                <el-form
                  label-width="70px"
                  style="margin: 20px 0"
                  class="popover_from"
                >
                  <el-form-item
                    size="small"
                    label="组织机构"
                    v-if="
                      user.roleName === 'TENANT_ADMIN' ||
                      user.roleName === 'ORG_ADMIN'
                    "
                  >
                    <TreeSearch
                      style="width: 360px; margin-left: 15px"
                      @changeOrgId="changeOrgId"
                      :typeInfo="user.roleName === 'UNIT_ADMIN' ? '4' : '1,2,3'"
                      ref="refTreeSearch"
                    >
                    </TreeSearch>
                  </el-form-item>
                  <el-form-item size="small" label="联网单位">
                    <el-select
                      size="small"
                      style="width: 360px; margin-left: 15px"
                      clearable
                      v-model="selectedValue"
                      placeholder="请选择联网单位"
                      filterable
                      remote
                      @clear="handleClear"
                    >
                      <el-option
                        v-for="item in orgList"
                        :label="item.orgName"
                        :value="item.id"
                        :key="item.id"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
                <div class="footer" style="text-align: right">
                  <el-button
                    size="small"
                    @click="resetClick"
                    class="cancel-button"
                    >重 置</el-button
                  >
                  <el-button
                    size="small"
                    class="confirm-button"
                    @click="onSearch"
                    >确 定</el-button
                  >
                </div>
              </div>
              <el-button
                size="small"
                slot="reference"
                :class="hasSearch ? 'elhasSearch elhasSearch2' : 'elhasSearch2'"
              >
                高级搜索<i
                  class="el-icon-search"
                  style="margin-left: 5px; font-size: 12px"
                ></i
              ></el-button>
            </el-popover>
          </div>
          <div class="content">
            <div class="left">
              <div class="fc_list" v-if="dataList.length > 0">
                <div class="list">
                  <div
                    class="item"
                    v-for="item in dataList"
                    :key="item.id"
                    @click="onSingleFc(item)"
                    :class="['item', item.isChecked ? 'active' : '']"
                  >
                    <div class="title">{{ item.name }}</div>
                    <div class="body">
                      <div class="img">
                        <img src="@/assets/images/datav/host.png" alt="主機" />
                      </div>
                      <div class="number">
                        <div class="pannel">
                          <span class="top">{{
                            item.fcrDeviceRelateds.length
                          }}</span>
                          <span class="bottom">设备点位</span>
                        </div>
                        <div class="pannel">
                          <span class="top">{{
                            item.fcrDutyUserRelatedVOS.length
                          }}</span>
                          <span class="bottom">值班人数</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="fc_page" v-if="dataList.length > 0">
                <Pagination
                  v-show="total > 0"
                  :total="total"
                  :page.sync="page"
                  :limit.sync="limit"
                  :pageSizes="[10, 20, 30, 50]"
                  @pagination="getDataList"
                  class="pagination"
                />
              </div>
              <transition name="fade" mode="out-in">
                <div class="no-warn-info" v-show="dataList.length <= 0">
                  <img :src="wugj" />
                  <div>暂无消控室数据</div>
                </div>
              </transition>
            </div>
            <div class="middle"></div>
            <div class="right">
              <div class="deviceList" v-if="deviceList.length">
                <div
                  class="device_item"
                  v-for="item in deviceList"
                  :key="item.id"
                  @click="onSingleHost(item)"
                  :class="['device_item', item.isChecked ? 'active' : '']"
                >
                  <div class="img">
                    <img src="@/assets/images/datav/host.png" alt="主機" />
                  </div>
                  <div class="info">
                    <p>
                      <span class="info-c"> 设备类型：</span>
                      <span class="info-c_c">{{
                        item.deviceType == "UserTransferDevice"
                          ? "用户传输装置"
                          : "火灾报警控制器"
                      }}</span>
                    </p>
                    <p>
                      <span class="info-c"> 设备编码：</span>
                      <span class="info-c_c"> {{ item.deviceCode }}</span>
                    </p>
                  </div>
                </div>
              </div>
              <transition name="fade" mode="out-in">
                <div class="no-warn-info" v-show="deviceList.length <= 0">
                  <img :src="wugj" />
                  <div>暂无主机设备</div>
                </div>
              </transition>
            </div>
          </div>
        </div>
      </template>
      <template #footer>
        <div class="footer-btns">
          <el-button size="small" @click="closeDialog" v-if="!isEmpty"
            >取消</el-button
          >
          <el-button size="small" @click="submit" v-preventReClick="1000"
            >确认</el-button
          >
        </div>
      </template>
    </Frame>
  </div>
</template>
<script>
import {
  reqFireControlRoomPage,
  reqFireControlRoomDel,
  reqFireControlRoomBatchDel,
  reqOrgList,
  reqOrgByUserId,
} from "@api/api.js";
import { mapState } from "vuex";
import Frame from "./frame.vue";
import loadMore from "@mixin/loadMore";
import TreeSearch from "@components/TreeSearch.vue";
import Pagination from "@components/Pagination.vue";
export default {
  props: {
    fcId: {
      type: String,
      default: "",
    },
    hiId: {
      type: String,
      default: "",
    },
    // 從大屏進來的時候爲true，取消按鈕隱藏
    isEmpty: {
      type: Boolean,
      default: false,
    },
  },
  components: { Frame, TreeSearch, Pagination },
  mixins: [loadMore],
  data() {
    return {
      dialogVisible: false,
      loadingSearch: false,
      searchForm: {
        name: "",
        orgId: "",
      },
      showPopover: false,

      dataList: [],
      limit: 10,
      page: 1,
      total: 0,

      itemInfo: {}, //一条记录信息

      projectList: [], //组织机构
      sysInstanceIndex: 1,
      sysInstanceTotalPages: 10,
      loading: false,

      batchDataList: [], //

      selectedValue: "",
      orgList: [],
      hasSearch: false,
      deviceList: [],
      wugj: require("@assets/images/datav/wugj.png"),
      currentFc: {},
      currentHi: {},
    };
  },
  watch: {
    async dialogVisible(val) {
      if (val) {
        this.fcId_copy = this.fcId;
        this.hiId_copy = this.hiId;
        this.deviceList = [];
        if (
          this.user.roleName == "ORG_ADMIN" ||
          this.user.roleName == "UNIT_ADMIN"
        ) {
          await this.getOrgByUserId();
          await this.getDataList();
        } else {
          this.getDataList();
        }
      }
    },
  },
  computed: {
    ...mapState(["user", "spacesManage"]),
  },
  methods: {
    // 获取用户所在机构
    async getOrgByUserId() {
      const res = await reqOrgByUserId(this.user.userId);
      if (res.code !== 20000) {
        this.$modal.notifyWarning(res.message);
        return;
      }
      // this.orgInfo = res.data.rows[0];
      this.searchForm.orgId = res.data.rows[0].id;
    },
    // 搜索
    async onSearch() {
      this.hiId_copy = "";
      this.fcId_copy = "";
      this.page = 1;
      this.limit = 10;
      this.showPopover = false;
      this.getDataList();
    },
    // 高级搜索重置
    async resetClick() {
      this.searchForm.orgId = "";
      this.selectedValue = "";
      this.page = 1;
      this.limit = 10;
      this.hiId_copy = "";
      this.fcId_copy = "";
      await this.getDataList();
      if (this.$refs.refTreeSearch) {
        this.$refs.refTreeSearch.onclose();
      }
      if (
        this.user.roleName != "INSTERALL_USER" &&
        this.user.roleName != "UNIT_ADMIN"
      ) {
        this.orgList = [];
      }
    },
    // 获取列表
    async getDataList() {
      const res = await reqFireControlRoomPage(this.page, this.limit, {
        tenantId: this.user.tenantId,
        userId: this.user.userId,
        roleName: this.user.roleName,
        orgId:
          this.selectedValue == "" ? this.searchForm.orgId : this.selectedValue, //机构||单位
        name: this.searchForm.name,
      });

      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.hasSearch =
        this.searchForm.orgId || this.selectedValue ? true : false;
      let { rows, total } = res.data;
      this.dataList = [];
      this.deviceList = [];
      this.currentFc = {};
      this.currentHi = {};
      let data1 = {};
      let data2 = {};
      rows.forEach((item) => {
        if (this.fcId_copy && this.hiId_copy) {
          if (item.id == this.fcId_copy) {
            data1 = item;
            item.isChecked = true;
            if (item.fcrDeviceRelateds.length) {
              item.fcrDeviceRelateds.forEach((item2) => {
                item2.parentId = item.id;
                if (
                  // UserTransferDevice用户传输装置  FireAlarmController火灾报警控制器
                  item2.deviceType === "UserTransferDevice" ||
                  item2.deviceType === "FireAlarmController"
                ) {
                  if (item2.deviceCode == this.hiId_copy) {
                    data2 = item2;
                    item2.isChecked = true;
                  } else {
                    item2.isChecked = false;
                  }
                  this.deviceList.push(item2);
                }
              });
            }
          } else {
            item.isChecked = false;
          }
        } else {
          if (item.fcrDeviceRelateds.length) {
            item.fcrDeviceRelateds.forEach((item2) => {
              item2.parentId = item.id;
              if (
                // UserTransferDevice用户传输装置  FireAlarmController火灾报警控制器
                item2.deviceType === "UserTransferDevice" ||
                item2.deviceType === "FireAlarmController"
              ) {
                // if (item2.deviceCode == this.hiId_copy) {
                //   data2 = item2;
                //   item2.isChecked = true;
                // } else {
                //   item2.isChecked = false;
                // }
                this.deviceList.push(item2);
              }
            });
          }
        }
      });
      if (this.fcId_copy && this.hiId_copy) {
        this.currentFc = data1;
        this.currentHi = data2;
      }
      this.dataList = rows;
      this.total = total;
    },
    getInitDataList() {
      this.page = 1;
      this.limit = 10;
      this.getDataList();
    },
    clearName() {
      this.getInitDataList();
    },
    async searchClick() {
      this.loadingSearch = true;
      await this.getInitDataList();
      this.loadingSearch = false;
    },
    // 选择组织机构
    changeOrgId(instanceId) {
      this.searchForm.orgId = instanceId.id;
      this.handleClear();
    },
    // 清空
    handleClear() {
      this.selectedValue = "";
      this.orgName = "";
      this.hiId_copy = "";
      this.fcId_copy = "";
      this.orgList = [];
      this.getOrgList();
    },
    // 请求单位列表
    async getOrgList() {
      let { tenantId, userId, roleName } = this.user;
      const res = await reqOrgList({
        tenantId,
        userId,
        roleName,
        orgName: this.orgName,
        parentId: this.searchForm.orgId,
        type: "4",
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.orgList = res.data.rows;
    },
    // 点击单个消控室
    onSingleFc(data) {
      this.currentFc = data;
      this.deviceList = [];
      this.fcId_copy = "";
      this.hiId_copy = "";
      this.dataList.forEach((item) => {
        if (item.id == data.id) {
          item.isChecked = true;
        } else {
          item.isChecked = false;
        }
      });
      if (data.fcrDeviceRelateds.length) {
        data.fcrDeviceRelateds.forEach((item) => {
          if (
            // UserTransferDevice用户传输装置  FireAlarmController火灾报警控制器
            item.deviceType === "UserTransferDevice" ||
            item.deviceType === "FireAlarmController"
          ) {
            item.isChecked = false;
            this.deviceList.push(item);
          }
        });
      }
    },
    // 点击单个主机
    onSingleHost(data) {
      this.currentHi = data;
      this.hiId_copy = "";
      if (JSON.stringify(this.currentFc) == "{}") {
        this.dataList.forEach((item) => {
          if (item.id == data.parentId) {
            this.currentFc = item;
          }
        });
      }
      let deviceList = JSON.parse(JSON.stringify(this.deviceList));
      deviceList.forEach((item) => {
        if (item.deviceCode == data.deviceCode) {
          item.isChecked = true;
        } else {
          item.isChecked = false;
        }
      });

      this.deviceList = deviceList;
    },
    // 点击绑定
    submit() {
      if (JSON.stringify(this.currentHi) == "{}")
        return this.$modal.notifyWarning("请选择主机设备");
      let params = {
        fcInfo: this.currentFc,
        hostInfo: this.currentHi,
      };
      this.$emit("update", params);
      this.closeDialog();
    },
    // 点击关闭弹框
    closeDialog() {
      this.searchForm.orgId = "";
      this.selectedValue = "";
      this.orgList = [];
      this.searchForm.name = "";
      this.hiId_copy = "";
      this.fcId_copy = "";
      this.$parent.showShade = false;
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="less" scoped>
.fontSize (@px, @attr: font-size) {
  @vw: (@px / 1920) * 100;
  @{attr}: ~"@{vw}vw";
}
.box {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 14px;
  .header {
    width: 100%;
    height: 10vh;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .content {
    position: relative;
    width: 100%;
    height: calc(100% - 10vh);
    display: flex;
    align-items: center;
    .left {
      width: calc(100% - 30% - 1px);
      height: 100%;
      border-right: 1px solid
        linear-gradient(
          to right,
          rgba(48, 82, 174, 0),
          rgba(48, 82, 174, 1),
          rgba(48, 82, 174, 0)
        );

      .fc_list {
        width: 100%;
        height: 90%;
        overflow: auto;
        .list {
          display: flex;
          flex-wrap: wrap;
          .item {
            width: 30%;
            height: 120px;
            display: flex;
            flex-direction: column;
            align-items: center;
            border: 1px solid rgba(42, 71, 154, 0.8);
            padding: 5px;
            border-radius: 6px;
            margin-right: 10px;
            margin-bottom: 10px;
            cursor: pointer;

            &:hover {
              border: 1px solid rgba(88, 117, 196, 0.8);
            }

            .title {
              width: 100%;
              color: #f1f1f1;
              text-align: center;
              padding-top: 5px;
              padding-bottom: 10px;
              border-bottom: 1px solid rgba(42, 71, 154, 0.4);
            }

            .body {
              width: 100%;
              display: flex;
              align-items: center;
              padding: 10px 0;
              .img {
                flex: 0.6;
                display: flex;
                align-items: center;
                justify-content: center;
              }
              .number {
                flex: 1;
                color: #f1f1f1;
                display: flex;
                align-items: center;
                justify-content: space-around;
                .pannel {
                  display: flex;
                  flex-direction: column;
                  align-items: center;

                  .top {
                    color: #568ade;
                    font-weight: 500;
                    .fontSize(20);
                  }

                  .bottom {
                    color: #a09f9f;
                  }
                }
              }
            }
          }
        }
      }
      .fc_page {
        width: 100%;
        height: 10%;
      }
    }
    .middle {
      width: 1px;
      height: 100%;
      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 70%;
        bottom: 0;
        width: 1px; /* 边框的宽度 */
        background: linear-gradient(
          to bottom,
          rgba(48, 82, 174, 0),
          rgba(48, 82, 174, 1),
          rgba(48, 82, 174, 0)
        ); /* 使用渐变作为背景 */
      }
    }
    .right {
      width: 30%;
      height: 100%;
      .deviceList {
        box-sizing: border-box;
        padding: 0 10px;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: auto;
        .device_item {
          display: flex;
          align-items: center;
          border: 1px solid rgba(42, 71, 154, 0.8);
          border-radius: 6px;
          box-sizing: border-box;
          padding: 8px 5px;
          margin-bottom: 10px;
          cursor: pointer;

          &:hover {
            border: 1px solid rgba(88, 117, 196, 0.8);
          }
          .img {
            width: 30%;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .info {
            .info-c {
              color: #a09f9f;
            }
            .info-c_c {
              color: #f1f1f1;
            }
          }
        }
      }
    }
    .no-warn-info {
      width: 100%;
      height: 95%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      align-content: center;
      margin-top: 1.5%;
      color: #fff;
      font-size: 0.7vw;

      > img {
        width: 110px;
        height: 110px;
        margin-bottom: 10px;
      }
    }
    .active {
      border: 1px solid rgba(255, 255, 255, 1) !important;
    }
  }
}
::v-deep .el-form-item__label {
  color: @primaryThemeTxtColor2;
  padding: 0px;
}
::v-deep .el-input__inner {
  color: @primaryContentTxt !important;
  border: 1px solid @primaryContentTxt !important;
  background: @primaryHeaderBgcolor !important;
  border: 1px solid @primaryBorderColor !important;
}

::v-deep .el-input-group__append,
.el-input-group__prepend {
  background-color: transparent !important;
}

.dropdown {
  background: #7367f0;
  color: #fff;
  border: none;
}

.popover.el-popover {
  background: rgba(7, 15, 44, 0.9) !important;
  border: 1px solid #070f2c !important;
}

.footer-btns {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

// 分页器

::v-deep .el-pagination {
  height: 50px;
  background: transparent;
}

::v-deep .el-pager {
  background: transparent !important;
}

::v-deep .el-pager li {
  border-radius: 30px;
  // background: #0d2a8c !important;
  // color: #fff;
  background: rgba(16, 58, 95, 0.8) !important; /* 深海蓝 */
  border: 1px solid #2a8bf2 !important; /* 科技蓝边框 */
  color: #e0f2fe !important; /* 浅蓝文字 */
}

::v-deep .el-pager li.active {
  // background: #114683 !important;
  // border: 1px solid #01eafc;
  // box-sizing: border-box;
  // color: #01eafc;
  // box-shadow: inset 0 0 2px rgba(1, 234, 252, 1);
  background: #2a8bf2 !important; /* 高亮科技蓝 */
  color: #001a33 !important; /* 深色文字提升对比度 */
  font-weight: bold;
  box-shadow: 0 0 8px rgba(42, 139, 242, 0.6); /* 发光效果 */
}

/* 悬停效果 */
.el-pager li:hover,
.el-pagination button:hover {
  background: #1a5f9c !important;
  transform: translateY(-1px);
  transition: all 0.3s;
}

/* 总记录数文字 */
::v-deep .el-pagination__total {
  color: #a7c4dc !important; /* 浅灰蓝 */
  font-size: 13px;
}
/* 页码输入框 */
.el-pagination .el-input__inner {
  background: rgba(16, 58, 95, 0.5) !important;
  border-color: #2a8bf2 !important;
  color: #fff !important;
}

::v-deep .el-pagination .btn-prev {
  background: #0d2a8c;
}

::v-deep .btn-prev .el-icon {
  color: #fff;
}

::v-deep .el-pagination .btn-next {
  background: #0d2a8c;
}

::v-deep .btn-next .el-icon {
  color: #fff;
}

// ::v-deep .el-pagination {
//   background: transparent !important;
// }

// ::v-deep .el-pagination .btn-prev {
//   background: #213a7f !important;
// }

// ::v-deep .el-pagination .btn-next {
//   background: #213a7f !important;
// }

// ::v-deep .el-pager {
//   background: #213a7f !important;
// }

// ::v-deep .el-pager li.active {
//   background: #527ca7 !important;
// }
</style>
